<template>
    <div>
        <el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="用户名" prop="suName">
                <el-input :disabled="true" v-model="ruleForm.suName"></el-input>
            </el-form-item>

            <el-form-item label="角色" prop="role"  >
                <el-select  v-model="roleName"  placeholder="请选择角色">
                    <el-option
                            v-for="item in role"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.roleName"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上传图片">
                <el-upload
                        list-type="picture-card"
                        action="#"
                        :limit="1"
                        :file-list="fileList"
                        :auto-upload="false"
                        :accept="accept"
                        :on-change="changeImag"
                        :on-exceed="handleExceed"
                        :before-remove="beforeRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>

        </el-form>

    </div>
</template>

<script>
    export default {
        name: "StaffEdit",
        data() {

            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('年龄不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 18) {
                            callback(new Error('必须年满18岁'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            return {

                img:"",
                fileList:[],
                accept: ".jpg,.png",//上传格式限制
                ruleForm: {

                },
                roleName:"",
                id:"",
                role:[],
                rules: {
                    role: [],
                    suName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let staffForm = new FormData();

                        this.role.forEach(itme=>{
                            if (this.roleName == itme.roleName){
                                staffForm.append("rid",itme.id)
                            }
                        })

                        staffForm.append("id",this.ruleForm.id)
                        staffForm.append("img",this.img.raw)

                        //调用异步，进行申请
                        this.$axios({
                            method: 'post',
                            url: "editStaff.action",
                            data: staffForm,
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }).then(res => {
                            if(res.data.msg=="修改成功"){
                                this.$message.success(res.data.msg);
                                this.$parent.$parent.getdata()
                                this.$parent.$parent.dialogVisible=false
                            }
                        }).catch(err => {
                            this.$message.warning(err);
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getid(id){
                    //this.roleName = ""
                    this.fileList = []
                    let users = new URLSearchParams()
                    users.append("id",id)
                    this.$axios.post("querybyid_Systemuser.action",users).
                    then(request=>{
                        //console.log( request.data)
                        this.ruleForm = request.data;
                        this.fileList.push({
                            name:request.data.topImg,
                            url:"http://127.0.0.1:9090/demo/"+request.data.topImg
                        })

                        if (request.data.roles!=null){
                            this.role.filter(itme=>{return itme.id===request.data.roles.id}).forEach(itme=>{
                                console.log(itme.roleName)
                                this.roleName = itme.roleName
                                    this.id = itme.id
                            })
                        }else {
                            this.roleName = "暂无角色"
                        }

                        //this.ruleForm.roleName = request.data.roles.roleName

                    }).
                    catch();

            },
            handleExceed(files, fileList) {
                this.$message.warning(`只能选择一个头像`)
            },
            beforeRemove(file, fileList) {
                if (this.$confirm(`确定移除 ${file.name}？`)) {
                    this.img = file;
                }
            },
            changeImag(file, fileList) {
                //获取文件信息
                this.img = file;
            },
            //获取角色
            getStaffRoles(){

                this.$axios.post("queryallroles.action").
                then(request=>{
                    //this.role = request.data;
                    let role = request.data.filter(item=>{
                        return  item.roleName!="供货商" && item.roleName!="商户" && item.roleName!="普通用户"
                    })
                    this.role = role
                }).
                catch()
            }
        },created() {
        }
    }
</script>

<style scoped>

</style>